<template>
  <view>
    <Header type="back" title="积分明细" />
    <view
      class="bg-f8ff w-100 ab left0 bottom0 rounded-right"
      :class="'top' + toprpx"
    >
      <view class="w-100 h140 f-c-c px-5">
        <!-- <view class="w200"></view> -->
        <view class="font45 t-20 font700">{{ userInfo.remainIntegral }}</view>
        <!-- <view class="w200 h24 font24 t-20 font400 f-e-c" @click="get_details">
					积分规则<image src="../../static/icon_right_0.png" class="w24 h24"/>
				</view> -->
      </view>
      <view class="w-100 px-2-6 pb-3 re">
        <view
          class="w-100 h100 px-4 circle32 font28 t-20 font600 bg-theme f-b-c"
          @click="get_back"
        >
          <!-- 屏蔽积分过期提醒 -->
          <!-- <view v-if="userInfo.expiredIntegral">{{userInfo.expiredIntegral}}积分将于月底过期，快去使用吧！</view> -->
          <view>快去使用吧！</view>
          <image src="../../static/icon_right_0.png" class="w24 h24" />
        </view>
      </view>

      <scroll-view class="scroll-view_H top270 uni-scroll" scroll-y="true">
        <view class="w-100 px-2-6">
          <view class="w-100 fs-b-b bg-white show0 circle32">
            <view
              v-for="(item, index) in list"
              :key="item.id"
              class="w-100 h130 f-b-c px-2-4 border-bottom"
            >
              <view>
                <view class="font24 t-20 font600 h28 f-y-c">{{
                  item.remark
                }}</view>
                <view class="font20 t-7 font400 mt-1">{{
                  item.createTime
                }}</view>
              </view>
              <!-- ?消费类型 1:收入 2：支出 -->
              <view
                class="font28 font600"
                :class="item.type == 2 ? 't-20' : 't-theme_1'"
              >
                {{ item.type == 2 ? "-" : "+" }}{{ item.integral }}
              </view>
            </view>
          </view>
        </view>
        <view class="w-100 h240"></view>
      </scroll-view>
    </view>
    <Footer index="my"></Footer>
  </view>
</template>

<script>
import HornMargin from "../../components/horn_margin.vue";
import Header from "../../components/header.vue";
import Footer from "../../components/footer.vue";

import { consumeList } from "../../api/user.js";

export default {
  components: {
    Header,
    HornMargin,
    Footer,
  },
  data() {
    return {
      toprpx: 220,
      list: [],
      query: {
        currentPage: 1,
        pageSize: 200,
      },
      userInfo: {},
    };
  },
  mounted() {
    this.get_consumeList();
    this.userInfo = uni.getStorageSync("userInfo") || {};
    this.toprpx = uni.getStorageSync("toprpx");
  },
  methods: {
    get_details() {
      uni.navigateTo({
        url: "/pages/integral/details",
      });
    },
    get_back() {
      uni.redirectTo({
        url: "/pages/integral/integral",
      });
    },
    async get_consumeList() {
      const { code, body } = await consumeList(this.query);
      if (code === "0") {
        this.list = body.records;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.scroll-view_H {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  box-sizing: border-box;
}
.border-bottom {
  &:last-child {
    border-bottom: none;
  }
}
</style>
